<template>
  <div>
    <div class="bg">
      <div class="bg_title">董家芽塬村</div>
      <div class="pl-60px">您好，{{ userName }}，欢迎使用数字乡村平台</div>
    </div>
    <div class="pt-10px">
      <el-row :gutter="10" justify="space-between">
        <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
          <el-card shadow="hover" class="mb-8px" style="height: 550px">
            <div>
              <div class="flex items-center justify-between">
                <el-button text type="primary" class="todo_center">
                  <img style="height: 34px; width: 36px" class="mr-8px" src="@/assets/imgs/home/list.png" alt="todo" />
                  待办中心
                </el-button>
                <el-button link type="primary" class="todo_more" @click="handleTodo">更多
                  <el-icon>
                    <ArrowRight />
                  </el-icon>
                </el-button>
              </div>
              <el-divider />
              <div>
                <el-skeleton v-if="loading === true" :rows="5" animated />
                <div class="flex items-center justify-around" v-if="loading === false">
                  <div class="todo_dealt">
                    <div class="todo_num">{{ todoNumber.待处理 }}</div>
                    <div class="todo_text">待处理</div>
                  </div>
                  <div class="todo_dealt">
                    <div class="todo_num">{{ todoNumber.已超期 }}</div>
                    <div class="todo_text">已超期</div>
                  </div>
                </div>
                <el-divider v-if="loading === false" />
                <div v-if="todoList.length != 0 && loading === false" class="todo_list"
                  style="height: 276px; overflow-y: auto">
                  <ul v-for="(item, index) in todoList" :key="index">
                    <li :title="item.title">{{ item.title }}</li>
                    <div class="time_stamp">
                      <div class="data_time">截止时间：{{ formatTime(item.deadlineTime, 'yyyy年MM月dd日') }}</div>
                      <div class="data_tag">{{ item.source }}</div>
                    </div>
                  </ul>
                </div>
                <div v-if="todoList.length === 0 && loading === false">
                  <el-empty description="暂无待办" />
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24">
          <el-card shadow="hover" class="mb-8px" style="height: 550px">
            <el-button text type="primary" class="todo_center">
              <span style="width: 3px; height: 18px; margin-right: 12px; background-color: #cc352f"></span>
              公告
            </el-button>
            <el-divider />
            <div>
              <el-skeleton v-if="loading === true" :rows="5" animated />
              <div v-if="noticeList.length != 0 && loading === false" class="home-message"
                style="height: 414px; overflow-y: auto">
                <div v-for="(item, index) in noticeList" :key="index" class="message" @click="detailBtn(item, index)">
                  <div class="message_text">
                    <div class="messagea_tag">{{ noticeTypeRelate(item.announcementType) }}</div>
                    <div class="ml-10px mr-10px">
                      <div class="message_title" :title="item.topic">{{ item.topic }}</div>
                    </div>
                  </div>
                  <div class="todo_more flex items-center" style="font-size: 14px; min-width: 165px">{{
                    formatTime(item.createTime, 'yyyy-MM-dd HH:mm:ss') }}
                    <el-icon class="ml-12px">
                      <ArrowRight />
                    </el-icon>
                  </div>
                </div>
              </div>
              <div v-if="noticeList.length === 0 && loading === false">
                <el-empty description="暂无公告" />
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" justify="space-between">
        <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
          <el-card shadow="hover" class="mb-8px" style="min-height: 300px">
            <div class="entrance">最近使用</div>
            <el-divider />
            <div>
              <el-row :gutter="10">
                <div v-for="item in visitedViews" :key="item.fullPath" :tag-item="item" class="mr-20px used_btn">
                  <el-col :xl="3" :lg="3" :md="4" :sm="6" :xs="6">
                    <router-link :to="{ ...item }" custom v-slot="{ navigate }">
                      <div @click="navigate">
                        <div class="flex items-center entrance_btn mb-20px"
                          style="width: 150px; background-color: #397890; justify-content: center">
                          {{ t(item.meta.title) }}
                        </div>
                      </div>
                    </router-link>
                  </el-col>
                </div>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" justify="space-between">
        <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
          <el-card shadow="hover" style="height: 300px">
            <div class="entrance">常用功能</div>
            <el-divider />
            <div class="flex items-center">
              <div class="flex items-center entrance_btn" @click="goOrchard">
                <img style="width: 23px; height: 23px" class="pr-10px pt-1px" src="@/assets/imgs/home/apple.png" />
                <div style="height: 23px; line-height: 23px;margin-right: 2px;">智慧果园管理系统</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
  <DetailDialog v-model:visible="editDialogVisible" @getis-show="getisShow" :editData="editData" />
</template>
<script lang="ts" setup>
import * as getTodoApi from '@/api/todoCenter/index'
import { formatTime } from '@/utils'
import { useTagsViewStore } from '@/store/modules/tagsView'
import DetailDialog from './components/detailDialog.vue'
const { t } = useI18n()
const tagsViewStore = useTagsViewStore()
const visitedViews = computed(() => {
  if (JSON.parse(localStorage.getItem('recentPages')) === null) {
    return tagsViewStore.getVisitedViews
  } else {
    if (JSON.parse(localStorage.getItem('recentPages')).length >= 1) {
      return JSON.parse(localStorage.getItem('recentPages'))
    }
  }
})
const { push } = useRouter()
const loading = ref(true) // 列表加载中
const userName = ref('')
const editDialogVisible = ref(false)
const editData = ref({})
const getisShow = (val) => {
  editDialogVisible.value = val
}
const noticeList = ref([])
const todoList = ref([])
//获取用户名
const getUser = async () => {
  getTodoApi.getUserInfo().then((res) => {
    userName.value = res.nickname
  })
}
const optionNoticetype = ref([])
/** 获取通知分类 */
const getnoticeType = () => {
  const params = {
    pageNo: 1,
    pageSize: 100,
    dictType: 'countryside_announcement_type'
  }
  getTodoApi.getDictData(params).then((res) => {
    optionNoticetype.value = res.list
  })
}
//获取待办列表
const gettodoList = async () => {
  const params = {
    pageNo: 1,
    pageSize: 100,
    pendingType: 0
  }
  getTodoApi.getTodoPage(params).then((res) => {
    todoList.value = res.list
    loading.value = false
  }).catch(error => {
    loading.value = false
  })
}
const todoNumber = ref([])
//获取待办数量
const gettodoNumber = async () => {
  getTodoApi.getTodoNumber().then((res) => {
    todoNumber.value = res
  })
}
//获取通知列表
const getnoticeList = async () => {
  const params = {
    pageNo: 1,
    pageSize: 100,
    announcementType: 0
  }
  getTodoApi.getNoticePage(params).then((res) => {
    noticeList.value = res.list
  })
}
// 通知列表分类字段映射
const noticeTypeRelate = (item) => {
  let content = ''
  optionNoticetype.value.forEach((t) => {
    if (t.value == item) {
      content = t.label
    }
  })
  return content
}
// 跳转待办中心
const handleTodo = () => {
  push({
    name: 'todoCenter'
  })
}
//通知详情
const detailBtn = (item, index) => {
  editDialogVisible.value = true
  editData.value = item
  editData.value.title = noticeTypeRelate(item.announcementType)
  noticeTypeRelate
}
// 智慧果园管理系统
const goOrchard = () => {
  window.open('http://cloud.linyaozhihuinongye.com/service/iot/login', '_blank')
}
/** 初始化 **/
onMounted(() => {
  getUser()
  gettodoNumber()
  getnoticeList()
  getnoticeType()
  gettodoList()
})
onUpdated(() => {

})
</script>
<style scoped>
.bg {
  width: 100%;
  height: 230px;
  background: url(/@/assets/imgs/home/bg.jpg) no-repeat;
  background-size: 100% 100%;
  color: rgb(16, 16, 16);
  font-size: 24px;
}

.bg_title {
  height: 50px;
  line-height: 50px;
  padding-top: 80px;
  font-size: 36px;
  margin-bottom: 10px;
  padding-left: 60px;
}

.todo_center {
  color: rgba(54, 54, 54, 1);
  font-size: 20px;
  text-align: left;
  padding-left: 0;
  cursor: default;
}

.el-button.is-text:not(.is-disabled):focus,
.el-button.is-text:not(.is-disabled):hover {
  background: #fff;
}

.todo_more {
  color: rgba(157, 157, 157, 1);
  font-size: 20px;
  text-align: left;
}

.todo_num {
  color: rgba(42, 42, 42, 1);
  font-size: 36px;
  margin-bottom: 8px;
  text-align: center;
}

.todo_text {
  color: rgba(201, 204, 210, 1);
  font-size: 18px;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 0px;
}

ul li {
  color: rgba(48, 48, 48, 1);
  font-size: 18px;
  margin-bottom: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

ul:last-child {
  margin-bottom: 0px;
}

ul li::before {
  content: '•';
  color: rgba(255, 184, 0, 1);
  font-size: 24px;
  margin-right: 6px;
}

.time_stamp {
  display: flex;
  margin-left: 16.5px;
}

.data_time {
  height: 20px;
  line-height: 20px;
  color: rgba(127, 127, 127, 1);
  font-size: 14px;
}

.data_tag {
  background-color: rgba(234, 241, 254, 1);
  color: rgba(74, 130, 249, 1);
  font-size: 13px;
  text-align: center;
  padding: 0 5px;
  margin-left: 8px;
}

.message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding: 11px 0;
  cursor: pointer;
}

.message:hover {
  background-color: rgba(255, 204, 204, 0.24);
}

.message_text {
  display: flex;
  align-items: center;
  color: rgba(16, 16, 16, 1);
}

.messagea_tag {
  background-color: rgba(240, 168, 161, 0.15);
  color: rgba(211, 34, 34, 1);
  font-size: 14px;
  text-align: center;
  padding: 0 5px;
  min-width: 65px;
  height: 24px;
  line-height: 24px;
}

.message_title {
  font-size: 16px;
  line-height: 24px;
  overflow: hidden;
  height: 24px;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.todo_list::-webkit-scrollbar,
.home-message::-webkit-scrollbar {
  width: 6px;
}

.todo_list::-webkit-scrollbar-thumb,
.home-message::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.boxScroll::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.el-button--primary.is-link,
.el-button--primary.is-plain,
.el-button--primary.is-text {
  --el-button-border-color: var(--el-color-primary);
}

.entrance {
  font-size: 18px;
}

.entrance_btn {
  font-size: 18px;
  cursor: pointer;
  padding: 10px;
  height: 25px;
  line-height: 25px;
  border-radius: 4px;
  background-color: rgba(240, 138, 51, 1);
  color: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 6px 0px rgba(148, 129, 129, 0.4);
}

.entrance_btn:hover,
.messagea_tag:hover,
.data_tag:hover {
  opacity: 0.8;
}

.used_btn:last-child {
  margin-right: 0 !important;
}

.todo_more .el-button.is-link:focus,
.el-button.is-link:hover {
  color: rgba(74, 130, 249, 1);
}
</style>
